<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram: Pulley System</title>
</head>
<body>
  <canvas id="physics_canvas" width="400" height="450" style="border: 1px solid #ccc;"></canvas>
  <script>
    const canvas = document.getElementById('physics_canvas');
    const ctx = canvas.getContext('2d');

    // --- Parameters and Coordinates ---
    const centerX = 200;
    const groundY = 350;
    const pulleyY = 100;
    const pulleyRadius = 40;
    const blockWidth = 60;
    const blockAHeight = 80;
    const blockBHeight = 50;
    
    // The ropes must be vertical to be tangent to the pulley.
    // Their x-positions are determined by the pulley's position and radius.
    const ropeLeftX = centerX - pulleyRadius;
    const ropeRightX = centerX + pulleyRadius;

    // The blocks' positions are determined by the ropes, so they are centered under them.
    const blockAX = ropeLeftX - blockWidth / 2;
    const blockAY = groundY - blockAHeight;
    const blockBX = ropeRightX - blockWidth / 2;
    const blockBY = groundY - blockBHeight;

    // --- Drawing Functions and Styles ---

    // Function to draw a block with a label
    const drawBlock = (x, y, w, h, label) => {
        ctx.fillStyle = '#E0E0E0'; // Light gray fill
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillRect(x, y, w, h);
        ctx.strokeRect(x, y, w, h);
        
        ctx.fillStyle = 'black';
        ctx.font = 'bold 24px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(label, x + w / 2, y + h / 2);
    };

    // --- Draw the Scene ---
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 1. Draw the Ground
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.moveTo(40, groundY);
    ctx.lineTo(360, groundY);
    ctx.stroke();

    // 2. Draw Blocks A and B
    drawBlock(blockAX, blockAY, blockWidth, blockAHeight, 'A');
    drawBlock(blockBX, blockBY, blockWidth, blockBHeight, 'B');

    // 3. Draw the Pulley Holder/Shaft
    // This is drawn before the wheel so it appears to go through it.
    ctx.fillStyle = '#DCDCDC'; // A lighter gray for the holder
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    // This single rectangle represents the combined shaft and axle mount.
    ctx.fillRect(centerX - 8, 40, 16, pulleyY - 40 + 15);
    ctx.strokeRect(centerX - 8, 40, 16, pulleyY - 40 + 15);

    // 4. Draw the Pulley Wheel
    ctx.fillStyle = '#BDBDBD'; // A darker gray for the pulley wheel
    ctx.beginPath();
    ctx.arc(centerX, pulleyY, pulleyRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();

    // 5. Draw the Rope
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.moveTo(ropeLeftX, blockAY); // From top of block A
    ctx.lineTo(ropeLeftX, pulleyY);  // Up to the pulley
    ctx.arc(centerX, pulleyY, pulleyRadius, Math.PI, 0); // Over the pulley
    ctx.lineTo(ropeRightX, blockBY); // Down to top of block B
    ctx.stroke();

    // 6. Draw the Force F
    ctx.beginPath();
    ctx.moveTo(centerX, 40); // Start from the top of the shaft
    ctx.lineTo(centerX, 20); // Arrow line
    // Arrowhead
    ctx.moveTo(centerX, 20);
    ctx.lineTo(centerX - 5, 28);
    ctx.moveTo(centerX, 20);
    ctx.lineTo(centerX + 5, 28);
    ctx.stroke();

    // Force Label 'F'
    ctx.fillStyle = 'black';
    ctx.font = 'italic bold 24px "Times New Roman"';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('F', centerX + 15, 30);

    // 7. Draw the Chinese Label at the bottom
    ctx.fillStyle = 'black';
    ctx.font = '22px "Songti SC", "SimSun"';
    ctx.textAlign = 'center';
    ctx.fillText('习题 1-29 图', centerX, 400);

  </script>
</body>
</html>